<template>
    <div>
      <div>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>{{$t("message.global.view")}}</span>
          </div>

          <div class="panes">
            <pie-data :text="$t('message.index.configNumber')" class="pane" type="primary" bgColor="green">156</pie-data>
            <pie-data :text="$t('message.index.serverNodeNumber')" class="pane" type="primary" bgColor="#d26a03">3</pie-data>
            <pie-data :text="$t('message.index.clientNumber')" class="pane" type="warning" >20</pie-data>
          </div>
        </el-card>
      </div>

      <div class="bottom">
        <div class="bottom-left">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>服务状态</span>
            </div>

            <div>
              <item-properties name="master" value="127.0.0.1"></item-properties>
              <item-properties name="运行时间" value=""></item-properties>
            </div>
          </el-card>
        </div>

        <div class="bottom-right">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>JRC</span>
            </div>

            <div>
<!--              <item-properties name="master" value="127.0.0.1"></item-properties>
              <item-properties name="运行时间" value="50分钟"></item-properties>
              <item-properties name="b" value="50分钟"></item-properties>-->

              <!--<item-properties name="码云地址" value="https://gitee.com/tomyjay/jrc"></item-properties>-->
              <div class="item">{{$t('message.global.jrcDesc')}}</div>
              <div class="item">{{$t('message.global.document')}}: <el-tag> <a target="_blank" href="https://gitee.com/tomyjay/jrc">https://gitee.com/tomyjay/jrc</a> </el-tag> </div>
              <div class="item">github： <el-tag> <a target="_blank" href="https://github.com/zxj19951029/jrc.git">https://github.com/zxj19951029/jrc.git</a> </el-tag> </div>
              <div class="item">码云： <el-tag> <a target="_blank" href="https://gitee.com/tomyjay/jrc">https://gitee.com/tomyjay/jrc</a> </el-tag> </div>
            </div>
          </el-card>
        </div>
      </div>


    </div>
</template>

<script>
    import PieData from "../component/PieData.vue";
    import ItemProperties from "../component/ItemProperties.vue";
    export default {
      components: {
        ItemProperties,
        PieData},
      name: "index",
      data : function(){
        return {

        }
      },
      mounted : function(){
        console.log(this);
      }
    }
</script>

<style scoped>
  .panes{display: flex;flex-direction: row;justify-content: center;}
.pane{margin-right: 6rem;}
  .el-card{border : 1px solid #cecece}
  .bottom{display: flex;flex-direction: row;margin-top:1rem;}
  .bottom-left{width:500px;}
  .bottom-right{width:100%;margin-left: 1rem;}
  .bottom-right .item{margin-bottom:10px;}
</style>
